<template>
    <div class="Livelectureinstructor">
        <div>
            <div class="toliebiao" style="margin-left:-10px;" @click="toliebiao(1)">
                <h2>私教</h2>  
                <span>附近私教 / 热门私教 / 上门私教 / 线上私教</span>
            </div>
            <div class="toliebiao" style="margin-left:21px;" @click="toliebiao(2)">
                <h2>机构</h2>  
                <span>附近机构 / 热门机构 / 公会 / 线下体验课</span>
            </div>
        </div>
        <img src="/images/客户端下载 拷贝.png" @click="goDonwload()" style="cursor: pointer;"/>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div  class="swiper-slide">
                    <img src="/images/活动banner轮播 拷贝@2x.png" class="Live-banner"/> 
                </div>
                <div  class="swiper-slide">
                    <img src="/images/活动banner轮播 拷贝@2x (1).png" class="Live-banner"/> 
                </div>
            </div><!-- 如果需要分页器 -->
	        <div class="swiper-pagination" style="top:130px;left:520px;"></div>
        </div>
        <div class="Livelectureinstructor-content">
            <div v-if="MultiplemessagesList.length == 0" class="Livelectureinstructor-content-head nochads">
                <span>我的身份</span>
                <div class="Nodata">
                    <div>
                        <label>
                            <img src="/images/圆角矩形 523@2x.png" alt="">
                        </label>
                        <label>
                            <span>您还不是老师哦，赶紧入驻吧！</span>
                            <span @click="Tointeacher">立即入驻</span>
                        </label>
                    </div>       
                </div>
                <div>
                    <label class="Livelectureinstructor-content-myclass-head">
                        <span>我的班级</span>
                    </label>
                    <div class="Nodata">
                        <div>
                            <label>
                                <img src="/images/无班级icon@2x.png" alt="">
                            </label>
                            <label>
                                <span>您还没有创建班级哦！</span>
                                <span @click="creatClass">立即创建</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="Livelectureinstructor-nav">
                    <ul>
                        <li v-for="(itme,index) in NavList" :key="index" @click="clcikNavList(index)"  :class="NavListIndex ==index?'navelecet':''">{{itme.name}}</li>
                    </ul>
                </div>
                <div class="Livelectureinstructor-content" v-if="islive_lecturer">
                    <div class="Livelectureinstructor-content-head">
                        <span>我的身份</span>
                        <div class="Livelectureinstructor-content-id" v-for="(item,index) in Livelectureinstructors" :key="index">
                            <ul class="Livelectureinstructor-conetnt-info">
                                <li>直播讲师</li>
                                <li>
                                    评分:<el-rate v-model="item.score" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                                </li>
                                <li>暂无课程</li>
                                <li>入驻时间  {{item.create_time}}</li>
                            </ul>
                            <ul class="Livelectureinstructor-conetnt-info-left">
                                <li>
                                    <span>累计学生</span>
                                    <span>{{item.map.currentStudentCount}}</span>
                                </li>
                                <li>
                                    <span>当前学生</span>
                                    <span>{{item.map.studentCount}}</span>
                                </li>
                                <li>
                                    <span>累计课时</span>
                                    <span>{{item.map.classCount}}</span>
                                </li>
                                <li>
                                    <span>本月课时</span>
                                    <span>{{item.map.courseCount}}</span>
                                </li>
                                <li>
                                    <span>剩余课时</span>
                                    <span>{{item.map.residueCount}}</span>
                                </li>
                                <li>
                                    <span>累计收益</span>
                                    <span>{{item.earnings}}</span>
                                </li>
                                <li>
                                    <span>本月收益</span>
                                    <span>{{item.map.monthlyEarnings}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="Livelectureinstructor-content-myclass">
                        <label class="Livelectureinstructor-content-myclass-head">
                            <span>我的班级</span>
                            <!-- <span>更多>></span> -->
                        </label>
                        <ul class="Livelectureinstructor-content-myclass-list">
                            <li v-for="(item,index) in Myclassinfo" :key="index" @click="Toclass(item)">
                                <img :src="item.faceUrl" alt="">
                                <div class="myclass-list-footer">
                                    <label>
                                        <span>{{item.group_name}}</span>
                                        <span v-if="item.type == 'online'">直播课堂</span>
                                        <span v-else>语音课堂</span>
                                    </label>
                                    <label>
                                        <span>{{item.age_grade}}</span>
                                        <span>{{item.create_time}}</span>
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Livelectureinstructor-content" v-show="isprivate_education">
                    <div class="Livelectureinstructor-content-head">
                        <span>我的身份</span>
                        <div class="Livelectureinstructor-content-id" v-for="(item,index) in private_educationList" :key="index">
                            <ul class="Livelectureinstructor-conetnt-info">
                                <li>私教</li>
                                <li>
                                    评分:<el-rate v-model="item.score" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                                </li>
                                <li>暂无课程</li>
                                <li>入驻时间  {{item.create_time}}</li>
                            </ul>
                            <ul class="Livelectureinstructor-conetnt-info-left">
                                <li>
                                    <span>累计学生</span>
                                    <span>{{item.map.currentStudentCount}}</span>
                                </li>
                                <li>
                                    <span>当前学生</span>
                                    <span>{{item.map.studentCount}}</span>
                                </li>
                                <li>
                                    <span>累计课时</span>
                                    <span>{{item.map.classCount}}</span>
                                </li>
                                <li>
                                    <span>本月课时</span>
                                    <span>{{item.map.courseCount}}</span>
                                </li>
                                <li>
                                    <span>剩余课时</span>
                                    <span>{{item.map.residueCount}}</span>
                                </li>
                                <li>
                                    <span>累计收益</span>
                                    <span>{{item.earnings}}</span>
                                </li>
                                <li>
                                    <span>本月收益</span>
                                    <span>{{item.map.monthlyEarnings}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="Livelectureinstructor-content-myclass">
                        <div class="My-comments">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的评论</span>
                                <!-- <span>更多>></span> -->
                            </label>
                             <div class="comments-Infos">
                                <div class="Nodata" v-if="MyComment.length == 0">
                                    <div>
                                        <label>
                                            <img src="/images/圆角矩形 523@2x.png" alt="">
                                        </label>
                                        <label>
                                            <span style="cursor: context-menu;">暂无评论</span>
                                        </label>
                                    </div>       
                                </div>
                                <div v-else class="comments-Infos-content" v-for="(commentitem,commentindex) in MyComment" :key="commentindex">
                                    <h3>{{commentitem.map.masterAppointmentInfo == null?'Topic/Talk about friends':commentitem.map.masterAppointmentInfo.title}}</h3>
                                    <label class="comments-Infos-content-head">
                                        <img :src="commentitem.userinfo == null ?'http://img.curiousmore.com/tmp/wxb5e61775df4be66c.o6zAJs79lDcdH9y2S57O_D2cStOw.fOBSPlfoYtgP1ac8dad1e4574737561654fa107e215f.png':commentitem.userinfo.avatar" alt="" class="coverimg">
                                        <h4>{{commentitem.map.userinfo == null ?'系统':commentitem.map.userinfo.nick_name}}</h4>
                                        <span>{{commentitem.create_time}}</span>
                                        <p>{{commentitem.content}}</p>
                                    </label>
                                    <label v-if="commentitem.map.subcount !== 0">
                                        
                                        <label class="comments-Infos-content-head" v-for="(replyinfo,replyinfoindex) in commentitem.map.subComment" :key="replyinfoindex">
                                            <img :src="replyinfo.map.userinfo.avatar" alt="" class="coverimg">
                                            <h4>{{replyinfo.map.userinfo.nick_name}}</h4>
                                            <span style="width:4%;color:#000">回复</span>
                                            <h4>{{replyinfo.map.replyinfo==null?'系统':replyinfo.map.replyinfo.nick_name}}</h4>
                                            <span>{{replyinfo.create_time}}</span>
                                            <p>{{replyinfo.content}}</p>
                                        </label>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Livelectureinstructor-content" v-if="ismajor">
                    <div class="Livelectureinstructor-content-head">
                        <span>我的身份</span>
                        <div class="Livelectureinstructor-content-id" v-for="(item,index) in majorList" :key="index">
                            <ul class="Livelectureinstructor-conetnt-info">
                                <li>专业助学师</li>
                                <li>
                                    评分:<el-rate v-model="item.score" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                                </li>
                                <li>暂无课程</li>
                                <li>入驻时间  {{item.create_time}}</li>
                            </ul>
                            <ul class="Livelectureinstructor-conetnt-info-left">
                                <li>
                                    <span>累计学生</span>
                                    <span>{{item.map.currentStudentCount}}</span>
                                </li>
                                <li>
                                    <span>当前学生</span>
                                    <span>{{item.map.studentCount}}</span>
                                </li>
                                <li>
                                    <span>累计课时</span>
                                    <span>{{item.map.classCount}}</span>
                                </li>
                                <li>
                                    <span>本月课时</span>
                                    <span>{{item.map.courseCount}}</span>
                                </li>
                                <li>
                                    <span>剩余课时</span>
                                    <span>{{item.map.residueCount}}</span>
                                </li>
                                <li>
                                    <span>累计收益</span>
                                    <span>{{item.earnings}}</span>
                                </li>
                                <li>
                                    <span>本月收益</span>
                                    <span>{{item.map.monthlyEarnings}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="My-comments">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的评论</span>
                                <!-- <span>更多>></span> -->
                            </label>
                            <div class="Nodata" v-if="MyComment.length == 0">
                                <div>
                                    <label>
                                        <img src="/images/圆角矩形 523@2x.png" alt="">
                                    </label>
                                    <label>
                                        <span style="cursor: context-menu;">暂无评论</span>
                                    </label>
                                </div>       
                            </div>
                            <div v-else class="comments-Infos-content" v-for="(commentitem,commentindex) in MyComment" :key="commentindex">
                                    <h3>{{commentitem.map.masterAppointmentInfo == null?'Topic/Talk about friends':commentitem.map.masterAppointmentInfo.title}}</h3>
                                    <label class="comments-Infos-content-head">
                                        <img :src="commentitem.userinfo == null ?'http://img.curiousmore.com/tmp/wxb5e61775df4be66c.o6zAJs79lDcdH9y2S57O_D2cStOw.fOBSPlfoYtgP1ac8dad1e4574737561654fa107e215f.png':commentitem.userinfo.avatar" alt="" class="coverimg">
                                        <h4>{{commentitem.map.userinfo == null ?'系统':commentitem.map.userinfo.nick_name}}</h4>
                                        <span>{{commentitem.create_time}}</span>
                                        <p>{{commentitem.content}}</p>
                                    </label>
                                    <label v-if="commentitem.map.subcount !== 0">
                                        
                                        <label class="comments-Infos-content-head" v-for="(replyinfo,replyinfoindex) in commentitem.map.subComment" :key="replyinfoindex">
                                            <img :src="replyinfo.map.userinfo.avatar" alt="" class="coverimg">
                                            <h4>{{replyinfo.map.userinfo.nick_name}}</h4>
                                            <span style="width:4%;color:#000">回复</span>
                                            <h4>{{replyinfo.map.replyinfo==null?'系统':replyinfo.map.replyinfo.nick_name}}</h4>
                                            <span>{{replyinfo.create_time}}</span>
                                            <p>{{replyinfo.content}}</p>
                                        </label>
                                    </label>
                                </div>
                        </div>
                        <!-- <div class="My-comments">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的评论</span>
                                <span>更多>></span>
                            </label>
                            <div class="comments-Infos">
                                <div class="Nodata" v-if="MyComment.length == 0">
                                    <div>
                                        <label>
                                            <img src="/images/圆角矩形 523@2x.png" alt="">
                                        </label>
                                        <label>
                                            <span>暂无评论</span>
                                        </label>
                                    </div>       
                                </div>
                                <div v-else class="comments-Infos-content" v-for="(commentitem,commentindex) in MyComment" :key="commentindex" >
                                    <div v-if="commentitem.map.masterAppointmentInfo !=null">
                                        <h3>{{commentitem.map.masterAppointmentInfo.title}}</h3>
                                        <label class="comments-Infos-content-head">
                                            <img :src="commentitem.map.userinfo.avatar" alt="" class="coverimg">
                                            <h4>{{commentitem.map.userinfo.nick_name}}</h4>
                                            <span>{{commentitem.create_time}}</span>
                                            <p>{{commentitem.content}}</p>
                                        </label>
                                        <label class="comments-Infos-content-head" v-for="(replyinfo,replyinfoindex) in commentitem.map.subComment" :key="replyinfoindex">
                                            <img :src="replyinfo.map.userinfo.avatar" alt="" class="coverimg">
                                            <h4>{{replyinfo.map.userinfo.nick_name}}</h4>
                                            <span style="width:4%;color:#000">回复</span>
                                            <h4>{{replyinfo.map.replyinfo.nick_name}}</h4>
                                            <span>{{replyinfo.create_time}}</span>
                                            <p>{{replyinfo.content}}</p>
                                        </label>
                                    </div>
                                    <div class="Nodata" v-else>
                                        <div>
                                            <label>
                                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                            </label>
                                            <label>
                                                <span>暂无评论</span>
                                            </label>
                                        </div>       
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <div class="my-students">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的学生</span>
                                <!-- <span>更多>></span> -->
                            </label>
                            <div class="Live-con-con-Focus-con">
                                <ul class="Nodata" v-if="studentsList.length == 0">
                                    <div>
                                        <label>
                                            <img src="/images/圆角矩形 523@2x.png" alt="">
                                        </label>
                                        <label>
                                            <span>暂无学生</span>
                                        </label>
                                    </div>       
                                </ul>
                                <ul v-else>
                                    <li v-for="(item,index) in studentsList" :key="index">
                                        <img :src="item.avatar"/>
                                        <label>
                                            <span>{{item.nick_name}}</span>
                                            <span>{{item.country}}/{{item.city}}</span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Livelectureinstructor-content" v-if="iscross_border">
                    <div class="Livelectureinstructor-content-head">
                        <span>我的身份</span>
                        <div class="Livelectureinstructor-content-id">
                            <ul class="Livelectureinstructor-conetnt-info">
                                <li>跨境助学师</li>
                                <li>
                                    评分:<el-rate v-model="scorevalue" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                                </li>
                                <li>暂无课程</li>
                                <li>入驻时间  2020-05-22</li>
                            </ul>
                            <!-- <ul class="Livelectureinstructor-conetnt-info-left">
                                <li v-for="(item,index) in ClassInfo" :key="index">
                                    <span>{{item.name}}</span>
                                    <span>{{item.value}}</span>
                                </li>
                            </ul> -->
                        </div>
                        <div class="My-comments">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的评论</span>
                                <!-- <span>更多>></span> -->
                            </label>
                            <div class="comments-Infos">
                                <div class="Nodata" v-if="MyComment.length == 0">
                                    <div>
                                        <label>
                                            <img src="/images/圆角矩形 523@2x.png" alt="">
                                        </label>
                                        <label>
                                            <span style="cursor: context-menu;">暂无评论</span>
                                        </label>
                                    </div>       
                                </div>
                                <div v-else class="comments-Infos-content" v-for="(commentitem,commentindex) in MyComment" :key="commentindex">
                                    <h3>{{commentitem.map.masterAppointmentInfo == null?'Topic/Talk about friends':commentitem.map.masterAppointmentInfo.title}}</h3>
                                    <label class="comments-Infos-content-head">
                                        <img :src="commentitem.userinfo == null ?'http://img.curiousmore.com/tmp/wxb5e61775df4be66c.o6zAJs79lDcdH9y2S57O_D2cStOw.fOBSPlfoYtgP1ac8dad1e4574737561654fa107e215f.png':commentitem.userinfo.avatar" alt="" class="coverimg">
                                        <h4>{{commentitem.map.userinfo == null ?'系统':commentitem.map.userinfo.nick_name}}</h4>
                                        <span>{{commentitem.create_time}}</span>
                                        <p>{{commentitem.content}}</p>
                                    </label>
                                    <label v-if="commentitem.map.subcount !== 0">
                                        
                                        <label class="comments-Infos-content-head" v-for="(replyinfo,replyinfoindex) in commentitem.map.subComment" :key="replyinfoindex">
                                            <img :src="replyinfo.map.userinfo.avatar" alt="" class="coverimg">
                                            <h4>{{replyinfo.map.userinfo.nick_name}}</h4>
                                            <span style="width:4%;color:#000">回复</span>
                                            <h4>{{replyinfo.map.replyinfo==null?'系统':replyinfo.map.replyinfo.nick_name}}</h4>
                                            <span>{{replyinfo.create_time}}</span>
                                            <p>{{replyinfo.content}}</p>
                                        </label>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="my-students">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的学生</span>
                                <span>更多>></span>
                            </label>
                            <div class="Live-con-con-Focus-con">
                                <ul>
                                    <li v-for="(item,index) in studentsList" :key="index">
                                        <img :src="item.avatar"/>
                                        <label>
                                            <span>{{item.nick_name}}</span>
                                            <span>{{item.country}}/{{item.city}}</span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="Livelectureinstructor-content" v-if="ismother_tongue">
                    <div class="Livelectureinstructor-content-head">
                        <span>我的身份</span>
                        <div class="Livelectureinstructor-content-id">
                            <ul class="Livelectureinstructor-conetnt-info">
                                <li>母语助学师</li>
                                <li>
                                    评分:<el-rate v-model="scorevalue" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                                </li>
                                <li>暂无课程</li>
                                <li>入驻时间  2020-05-22</li>
                            </ul>
                            <!-- <ul class="Livelectureinstructor-conetnt-info-left">
                                <li v-for="(item,index) in ClassInfo" :key="index">
                                    <span>{{item.name}}</span>
                                    <span>{{item.value}}</span>
                                </li>
                            </ul> -->
                        </div>
                        <div class="My-comments">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的评论</span>
                                <!-- <span>更多>></span> -->
                            </label>
                            <div class="Nodata" v-if="MyComment.length == 0">
                                    <div>
                                        <label>
                                            <img src="/images/圆角矩形 523@2x.png" alt="">
                                        </label>
                                        <label>
                                            <span style="cursor: context-menu;">暂无评论</span>
                                        </label>
                                    </div>       
                                </div>
                                <div v-else class="comments-Infos-content" v-for="(commentitem,commentindex) in MyComment" :key="commentindex">
                                    <h3>{{commentitem.map.masterAppointmentInfo == null?'Topic/Talk about friends':commentitem.map.masterAppointmentInfo.title}}</h3>
                                    <label class="comments-Infos-content-head">
                                        <img :src="commentitem.userinfo == null ?'http://img.curiousmore.com/tmp/wxb5e61775df4be66c.o6zAJs79lDcdH9y2S57O_D2cStOw.fOBSPlfoYtgP1ac8dad1e4574737561654fa107e215f.png':commentitem.userinfo.avatar" alt="" class="coverimg">
                                        <h4>{{commentitem.map.userinfo == null ?'系统':commentitem.map.userinfo.nick_name}}</h4>
                                        <span>{{commentitem.create_time}}</span>
                                        <p>{{commentitem.content}}</p>
                                    </label>
                                    <label v-if="commentitem.map.subcount !== 0">
                                        
                                        <label class="comments-Infos-content-head" v-for="(replyinfo,replyinfoindex) in commentitem.map.subComment" :key="replyinfoindex">
                                            <img :src="replyinfo.map.userinfo.avatar" alt="" class="coverimg">
                                            <h4>{{replyinfo.map.userinfo.nick_name}}</h4>
                                            <span style="width:4%;color:#000">回复</span>
                                            <h4>{{replyinfo.map.replyinfo==null?'系统':replyinfo.map.replyinfo.nick_name}}</h4>
                                            <span>{{replyinfo.create_time}}</span>
                                            <p>{{replyinfo.content}}</p>
                                        </label>
                                    </label>
                                </div>
                        </div>
                        <div class="my-students">
                            <label class="Livelectureinstructor-content-myclass-head">
                                <span>我的学生</span>
                                <!-- <span>更多>></span> -->
                            </label>
                            <div class="Live-con-con-Focus-con">
                                <ul class="Nodata" v-if="studentsList.length == 0">
                                    <div>
                                        <label>
                                            <img src="/images/圆角矩形 523@2x.png" alt="">
                                        </label>
                                        <label>
                                            <span>暂无学生</span>
                                        </label>
                                    </div>       
                                </ul>
                                <ul>
                                    <li v-for="(item,index) in studentsList" :key="index">
                                        <img :src="item.avatar"/>
                                        <label>
                                            <span>{{item.nick_name}}</span>
                                            <span>{{item.country}}/{{item.city}}</span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Live-footer">
            <img src="/images/新手指导教程.png"/>
        </div>
        <div v-show="popup1">
      <!--这里是要展示的内容层-->
      <div class="login1">
        <div class="popup1_title">创建班级</div>
        <label class="creat_classname">
          <el-input placeholder="请输入班级名称" style="width:50%;" v-model="classname"></el-input>
        </label>
        <label class="creat_cover">
          <el-upload
            class="creat_uploader"
            :action="domain"
            :show-file-list="false"
            :data="QiNiYunss"
            :before-upload="beforeUploadGetKeyss"
            :on-success="UploadCreatcover"
          >
            <div>{{creatClass_cover == ''?'请上传班级封面':'选择此图'}}</div>
            <img v-if="creatClass_cover" :src="creatClass_cover" class="creat_avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon creat_i"></i>
          </el-upload>
        </label>
        <label class="creat_language">
          <el-select v-model="Language" @change="ChangeLanguage" placeholder="请选择语言">
            <el-option v-for="(item,index) in languageList" :key="index" :value="item"></el-option>
          </el-select>
        </label>
        <label class="creat_people">
          <el-select v-model="people" @change="ChangePeople" placeholder="请选择面向人群">
            <el-option v-for="(item,index) in peopleList" :key="index" :value="item"></el-option>
          </el-select>
        </label>
        <div class="popup1_confirm" @click="createdClasss">确认创建</div>
        <div class="popup1_cancle" @click="closepopup1">取消</div>
      </div>
      <!--这里是半透明背景层-->
      <div class="over1"></div>
    </div>
    </div>
</template>
<script>
import Swiper from 'swiper' 
import 'swiper/css/swiper.css';
export default {
    name:'Livelectureinstructor',
    data(){
        return{
            ismajor:false,//专业
            iscross_border:false,//跨境
            ismother_tongue:false,//母语
            isprivate_education:false,//私教
            isadvertising_position:false,//广告位
            islive_lecturer:false,//直播讲师
            mother_tongueList:[],
            private_educationList:[],
            creatClass_cover: "",
            QiNiYunss: {
                key: "avator",
                token: ""
            },
            domain: "http://up-z0.qiniup.com",
            qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
            upload_qiniu_addr: "http://img.curiousmore.com/",
            classname:'',
            people: "",
            peopleList: ["幼儿", "青少年", "大学生", "成人"],
            Language:'',
            languageTranslate: [
                { Estonian: "爱沙尼亚语" },
                { Arabic: "阿拉伯语" },
                { Bulgarian: "保加利亚语" },
                { polish: "波兰语" },
                { Danish: "丹麦语" },
                { German: "德语" },
                { Russian: "俄语" },
                { "Traditional Chinese": "繁体中文" },
                { French: "法语" },
                { Finnish: "芬兰语" },
                { Korean: "韩语" },
                { Dutch: "荷兰语" },
                { Czech: "捷克语" },
                { romanian: "罗马尼亚语" },
                { Portuguese: "葡萄牙语" },
                { Japanese: "日语" },
                { Swedish: "瑞典语" },
                { slovenian: "斯洛文尼亚语" },
                { Thai: "泰语" },
                { Spanish: "西班牙语" },
                { Greek: "希腊语" },
                { hun: "匈牙利语" },
                { Italian: "意大利语" },
                { English: "英语" },
                { Vietnamese: "越南语" },
                { cantonese: "粤语" },
                { Chinese: "中文" }
            ],
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
            languageList: [],
            popup1: 0,
            NavList:[],
            NavListIndex:0,
            NavListIndexName:[],
            scorevalue: 3.7,
            Myclassinfo:[],
            studentsList:[
                {
                    avatar:'/images/图层 10.png',
                    nick_name:'啊哈哈',
                    country:'中国台湾',
                    city:'高雄市'
                },
                {
                    avatar:'/images/图层 10.png',
                    nick_name:'Peter Q',
                    country:'英国',
                    city:'伦敦'
                },
                {
                    avatar:'/images/图层 10.png',
                    nick_name:'Saxen',
                    country:'中国浙江',
                    city:'杭州市'
                },
            ],
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            MultiplemessagesList:[],
            Livelectureinstructors:[],
            majorList:[],
            MyclassList:[],
            MyComment:[],
        }
    },
    mounted() {
        new Swiper('.swiper-container', {//初始化swiper轮播图
		    loop: true, // 循环模式选项
            pagination: {//绑定分页器
                el: '.swiper-pagination',
                clickable: true,
                modifierClass : 'my-pagination-',
            },
            autoplay: {//设置自动切换时间
                delay: 4000,
            },
            
        })
        this.MyclassinfoList()
        this.getMyclassList()
        this.Getcomments()
        this.getLanguageList()
        this.getQiniuTokenss()
    },
    created(){
        this.Getmultiplemessages()
    },
    methods:{
        toliebiao(index){
            if(index == 1){
                this.$router.push({ path:'/views/sijiaoList'})
            }else if (index == 2){
                this.$router.push({ path:'/views/Listofinstitutions',query: {index:8,}})
            }
        },
        getmyStudent(type){
            let _this = this
            let data = {
                currentPage : 1,
                master_id :_this.unserinfo.user_id ,
                master_type : type,
                pageSize : 5,
            }
            this.$axios({
                method: "get",
                url: "http://101.37.66.151:8768/eg-api/user/userAppointment/queryStudentListPage",
                params: data
            }).then(res => {
                console.log(res.data.data)
                this.studentsList = []
                let studentinfo = {}
                res.data.data.map(item=>{
                    studentinfo.avatar = item.map.userinfo.avatar
                    studentinfo.nick_name = item.map.userinfo.nick_name
                    studentinfo.country = item.map.userinfo.country
                    studentinfo.city = item.map.userinfo.city
                })
            })
            .catch(error => {
                console.log(error);
            });
        },
        UploadCreatcover(res, file) {
            this.creatClass_cover = this.upload_qiniu_addr + res.key;
        },
        goDonwload(){
            this.$router.push({path:'/views/Download'})
        },
        beforeUploadGetKeyss() {
            //每个文件上传之前 给它一个 名字
            //  this.QiNiYun.key = this.guid();
            this.getQiniuTokenss();
        },
        getQiniuTokenss() {
            var data = {
                key: this.guid(),
                type: "pic"
            };
            this.$axios({
                method: "POST",
                url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
                data: data
            }).then(response => {
                this.QiNiYunss.token = response.data.data;
                this.QiNiYunss.key = data.key;
            })
            .catch(error => {
                console.log(error);
            });
        },
        createdClasss() {
            let langu = "";
            let age_grade = "";
            this.languageTranslate.map(item => {
                for (let x in item[x]) {
                    if (this.Language == x) {
                        langu = x;
                    }
                }
            });
            if (this.people == "幼儿") {
                age_grade = "Childhood";
            } else if (this.people == "青少年") {
                age_grade = "Teenagers";
            } else if (this.people == "大学生") {
                age_grade = "University Student";
            } else if (this.people == "成人") {
                age_grade = "Adult";
            }
            if(this.group_name == ''){
                this.$message('请填写班级名称')
                return
            }
            if(this.creatClass_cover == ''){
                this.$message('请上传班级封面')
                return
            }
            if(this.Language == ''){
                this.$message('请选择语言')
                return
            }
            if(this.people == ''){
                this.$message('请填写面向人群')
                return
            }
            let data = {
                age_grade: age_grade,
                faceUrl: this.creatClass_cover,
                group_name: this.classname,
                language: langu,
                owner_id: this.unserinfo.user_id,
                type: "online"
            };
            this.$axios({
                method: "POST",
                url: "http://101.37.66.151:8768/eg-api/message/messageGroup/insert",
                data: data
            }).then(res => {
                console.log(res.data.data);
                this.popup1 = 0
                this.people = ''
                this.group_name = ''
                this.Language = ''
                this.creatClass_cover = ''

            }).catch(error => {
                console.log(error);
            });
        },
        ChangePeople(e) {
            this.people = e;
        },
        ChangeLanguage(e) {
            this.language = e.value;
        },
        getLanguageList() {
            this.languageTranslate.map(item => {
                for (let x in item) {
                this.languageList.push(item[x]);
                }
            });
        },
        showpopup1() {
            this.popup1 = 1;
        },
        closepopup1() {
            this.popup1 = 0;
        },
        clcikNavList(e){
            let a = [false,false,false,false,false,false]
            let b = ['ismajor','iscross_border','ismother_tongue','isprivate_education','isadvertising_position','islive_lecturer',],index
            if(this.NavList[e].name == '私教'){
                index = b.indexOf('isprivate_education')
            }else if (this.NavList[e].name == '直播讲师'){
                index = b.indexOf('islive_lecturer')
            }else if (this.NavList[e].name == '专业助学师'){
                this.getmyStudent('major')
                index = b.indexOf('ismajor')
            }else if (this.NavList[e].name == '跨境助学师'){
                index = b.indexOf('iscross_border')
            }else if (this.NavList[e].name == '母语助学师'){
                this.getmyStudent('mother_tongue')
                index = b.indexOf('ismother_tongue')
            }else if (this.NavList[e].name == '广告位'){
                index = b.indexOf('isadvertising_position')
            }
            a.map((item,indax)=>{
                if(indax == index){
                    a[indax] = true
                }else{
                    a[indax] = false
                }
            })
            this.ismajor=a[0]
            this.iscross_border=a[1]
            this.ismother_tongue=a[2]
            this.isprivate_education=a[3]
            this.isadvertising_position=a[4]
            this.islive_lecturer=a[5]
            this.NavListIndex = e
            console.log(this.ismajor,
                        this.iscross_border,
                        this.ismother_tongue,
                        this.isprivate_education,
                        this.isadvertising_position,
                        this.islive_lecturer,)
        },
        MyclassinfoList(){//直播课堂我的班级
            if(this.NavListIndex == 0){
                var data ={
                    currentPage:1,
                    pageSize:5,
                    owner_id:this.unserinfo.user_id
                }
                this.$axios({
                    method:'get',
                    url:'http://101.37.66.151:8768/eg-api/message/messageGroup/queryMyListPage',
                    params:data,
                }).then((res) =>{
                    this.Myclassinfo = res.data.data
                    this.Myclassinfo.forEach(e=>{
                        var stars = e.create_time
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        e['create_time'] = times
                        if(e.age_grade == 'University Student'){
                            e['age_grade'] = '大学生'
                        }else if(e.age_grade == 'Teenagers'){
                            e['age_grade'] = '青少年'
                        }else if(e.age_grade == 'Adult'){
                            e['age_grade'] = '成年'
                        }else if(e.age_grade == 'childhood '){
                            e['age_grade'] = '儿童'
                        }
                    })
                }).catch((error) =>{
                    console.log(error)
                })
            }
        },
        Getmultiplemessages(){//获取老师多重信息
            var _this = this
            var data ={
                user_id:this.unserinfo.user_id,
                status :2,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryTeachingCenter',
                params:data,
                }).then((res) =>{
                    this.MultiplemessagesList =res.data.data
                    console.log(this.MultiplemessagesList,'多重信息')
                    this.MultiplemessagesList.forEach(e=>{
                        var arrs = {
                            name:e.map.mastertype.name
                        }
                        this.NavList.push(arrs)
                        if(e.map.mastertype.type == 'live_lecturer'){
                            this.Livelectureinstructors.push(e)
                            this.NavListIndexName = e.map.mastertype.type
                            var stars = this.Livelectureinstructors[0].create_time
                            var times = stars.substring(0, stars.indexOf(' '))
                            this.Livelectureinstructors[0]['create_time'] = times                             
                        }else if(e.map.mastertype.type == 'major'){
                            this.majorList.push(e)
                            var stars = this.majorList[0].create_time
                            var times = stars.substring(0, stars.indexOf(' '))
                            this.majorList[0]['create_time'] = times 
                        }else if(e.map.mastertype.type == 'private_education'){
                            this.private_educationList.push(e)
                            var stars = this.private_educationList[0].create_time
                            var times = stars.substring(0, stars.indexOf(' '))
                            this.private_educationList[0]['create_time'] = times  
                            console.log(this.private_educationList,'aaa')
                        }
                    })
                    this.clcikNavList(0)//获取老师多重身份之后默认加载第一个
                }).catch((error) =>{
                    console.log(error)
            })
        },
        getMyclassList(){
            var data ={
                master_id:this.unserinfo.user_id,
                currentPage:1,
                pageSize :5,
                master_type:'major'
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryStudentListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'我的班级')
                this.MyclassList = res.data.data
            }).catch((error) =>{
                console.log(error)
            })
        },
        Toclass(item){
            console.log(item)
            this.$router.push({path:'/views/Teachingcenters/Classdetails',query: {id: item.id}})
        },
        Tointeacher(){
            this.$router.push({path:'/views/Teachingcenters/Studentteacher'})
        },
        creatClass(){
            if(this.MultiplemessagesList.length == 0){
                this.$router.push({path:'/views/Teachingcenters/Studentteacher'})
            }else{
                this.showpopup1()
            }
        },
        Getcomments(){
            var data = {
                currentPage:1,
                parent_id:0,
                master_id:this.unserinfo.user_id,
                pageSize:10,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterComment/queryListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'我的评论')
                this.MyComment = res.data.data
                this.MyComment.map((item,index)=>{
                    if(item.map.masterAppointmentInfo.title !== ''){
                        this.Thetheme.forEach(is=>{
                            if(is[item.map.masterAppointmentInfo['title']]){
                                item.map.masterAppointmentInfo['title'] = is[item.map.masterAppointmentInfo['title']]
                            }
                        })
                    }
                    // if(item.map.masterAppointmentInfo == null){
                    //     console.log(index)
                    //     res.data.data.splice(index,1)
                    // }
                    // console.log(item.map,item.map.userinfo == null)
                })
                // let pinglunInfo = {}
                // res.data.data.map(item=>{
                //     if(item.map.masterAppointmentInfo.title !== ''){
                //         pinglunInfo.title = item.map.masterAppointmentInfo.title
                //         for(let x in this.Thetheme){
                //             if(pinglunInfo.title.title == x){
                //                 pinglunInfo.title = this.Thetheme[x]
                //             }
                //         }
                //         console.log(pinglunInfo.title)
                //     }
                //     if(item.map.userinfo == null){
                //         pinglunInfo.avatar = 'http://img.curiousmore.com/tmp/wxb5e61775df4be66c.o6zAJs79lDcdH9y2S57O_D2cStOw.fOBSPlfoYtgP1ac8dad1e4574737561654fa107e215f.png'
                //         pinglunInfo.nick_name = '系统'
                //     }else{
                //         pinglunInfo.avatar = item.map.userinfo.avatar
                //         pinglunInfo.nick_name = item.map.userinfo.nick_name
                //     }
                //     if(item.create_time!== ''){
                //         pinglunInfo.create_time = item.create_time
                //     }
                //     if(item.content !== ''){
                //         pinglunInfo.content = item.content
                //     }
                //     this.MyComment.push(pinglunInfo)
                // })
                console.log(this.MyComment,'我的评论')
            }).catch((error) =>{
                console.log(error)
            })
        },
    }
}
</script>
<style lang="less" scoped>
.toliebiao{
        background: url('/images/组 11 拷贝@2x.png') no-repeat center center;
        background-size: 100% 100%;
        width: 49%;
        position: relative;
        top: 10px;
        left: 10px;
        display: inline-block;
        margin-bottom: 23px;
        text-align: center;
        color: #47cecf;
        height: 139px;
        font-weight: bold;
        cursor: pointer;
    }
.creat_language {
  height: 60px;
  align-items: center;
  position: absolute;
  top: 255px;
  left: 130px;
  width: 570px;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
  }
}
.creat_people {
  height: 60px;
  align-items: center;
  position: absolute;
  top: 320px;
  left: 130px;
  width: 570px;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
  }
}
.creat_avatar {
  width: 100px;
}
.creat_cover {
  width: 100%;
  height: 200px;
  /deep/.creat_uploader {
    width: 286px;
    height: 33px;
    border: 1px solid #cecece;
    position: absolute;
    top: 197px;
    left: 130px;
    font-size: 14px;
    color: #cbcbcb;
    /deep/.el-upload {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: 31px;
        max-width: 80%;
        margin-left: 131px;
      }
    }
  }
}
.creat_classname {
  position: absolute;
  top: 130px;
  left: 130px;
  width: 581px;
  height: 54px;
}
.popup1_confirm {
  position: absolute;
  top: 470px;
  left: 303px;
  color: #fff;
  background: #47cecf;
  width: 213px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 27px;
  cursor: pointer;
}
.popup1_cancle {
  text-align: center;
  position: absolute;
  top: 470px;
  left: 64px;
  width: 213px;
  height: 54px;
  border-radius: 27px;
  line-height: 54px;
  background: #e1e1e1;
  color: #9f9f9f;
}
.login1 {
  position: fixed;
  font-size: 24px;
  height: 549px;
  width: 560px;
  background-color: #fdfdfd;
  border-radius: 1.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1003;
  .popup1_title {
    font-size: 24px;
    color: #2d2d2d;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-top: 16px;
  }
}
    .over1 {
        position: fixed;
        width: 100%;
        height: 100%;
        opacity: 0.7; //透明度为70%
        filter: alpha(opacity=70);
        top: 0;
        left: 0;
        z-index: 1001;
        background-color: #111111;
    }
    .Learningcenter-content-right{
        background: none!important;
    }
    .Livelectureinstructor{
        width: 100%;
        img{
            width: 100%;
            height: 100%;
        }
        .Live-banner{
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
    /*内容样式*/
    .Livelectureinstructor-content{
        width: 100%;
        background: #ffffff;
        border-radius: 15px;
        min-height: 590px;
    }
    .Livelectureinstructor-nav{
        position: relative;
        width: 90%;
        height: 60px;
        margin: 0 auto;
        ul{
            list-style: none;
            width: 100%;
            height: 60px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            padding: 0;
            margin: 0%;
            li{
                height: 60%;
                text-align: center;
                cursor: pointer;
                margin-left: 40px;
            }
        }
    }
    .navelecet{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8;
    }
    .Livelectureinstructor-content{
        position: relative;
        width: 100%;
    }
    .Livelectureinstructor-content-head{
        position: relative;
        width: 90%;
        margin: 0 auto;
        color: #2DC7C8;
        font-weight: bold;
        font-size: 16px;
    }
    .Livelectureinstructor-content-head>span{
        display: inline-block;
        width: 10%;
        height: 20px;
        border-left: 8px solid #2DC7C8;
        line-height: 20px;
        padding-left: 1%;
    }
    .Livelectureinstructor-content-id{
        position: relative;
        width: 100%;
        height: 140px;
        border:1px solid rgba(71,206,207,1);
        border-radius:8px;
        margin-top: 30px;
        display: flex;
    }
    .Livelectureinstructor-conetnt-info{
        list-style: none;
        width: 24%;
        padding-left: 2%;
        li{
            color: #434242;
            font-size: 12px;
            margin-top: 14px;
            &:first-child{
                margin: 0;
                font-size: 16px;
                font-weight: bold;
            }
        }
        /deep/.el-rate{
            display: inline-block;
        }
    }
    .Livelectureinstructor-conetnt-info-left{
        display: flex;
        list-style: none;
        width: 70%;
        height: 100%;
        padding: 0;
        margin: 0;
        flex-wrap: nowrap;
        align-items: center;
        li{
            width: 20%;
            height: 50%;
            border:1px solid rgba(71,206,207,1);
            border-radius:3px;
            margin-left: 2%;
            span{
                display: flex;
                width: 100%;
                height: 40%;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                color: #434242;
            }
        }
    }
    .Livelectureinstructor-content-myclass{
        position: relative;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    .Livelectureinstructor-content-myclass-head{
        margin-top: 30px;
        display: flex;
        align-items: flex-end;
        height: 20px;
        span{
            width: 50%;
            height: 20px;
            line-height: 20px;
            text-align: right;
            &:first-child{
                border-left: 8px solid #2DC7C8;
                padding-left: 1%;
                text-align: left;
                color: #2DC7C8;
                font-weight: bold;
            }
            &:last-child{
                color: #B7B7B7;
                cursor: pointer;
            }
        }
    }
    .Livelectureinstructor-content-myclass-list{
        list-style: none;
        display: flex;
        padding: 0;
        width: 100%;
        margin-top: 30px;
        li{
            width: 18%;
            max-height: 170px;
            margin-left: 2.25%;
            background: red;
            border:1px solid rgba(71,206,207,1);
            border-radius:8px;
            background: #ffffff;
            overflow: hidden;
            cursor: pointer;
            &:first-child{
                margin: 0;
            }
            img{
                width: 100%;
                height: 60%;
            }
        }
    }
    .myclass-list-footer{
        position: relative;
        width: 90%;
        margin: 0 auto;
        label{
            display: flex;
            width: 100%;
            margin-top: 10px;
            span{
                width: 50%;
                font-size: 12px;
                &:last-child{
                    text-align: right;
                }
            }
            &:first-child{
                color: #FF5D5D;
                span{
                    &:first-child{
                        width: 70%;
                        font-weight: bold;
                        color: #2D2D2D;
                    }
                }
            }
        }
    }
    /*我的跨境助学师样式*/
    .My-comments{
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    .comments-Infos{
        width:100%;
        height:168px;
        margin-top: 30px;
        overflow-y: auto;
        // border:1px solid rgba(214,214,214,1);
        border-radius:8px;
    }
    /*滚动条样式*/
    .comments-Infos::-webkit-scrollbar {
        width: 4px;    
    }
    .comments-Infos::-webkit-scrollbar-thumb{
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    .comments-Infos::-webkit-scrollbar-track{
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);

    }
    .comments-Infos-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        h3{
            color: #404040;
        }
    }
    .coverimg{
        width: 40px!important;
        height: 40px!important;
        border-radius: 20px;
    }
    .comments-Infos-content-head{
        display: flex;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;
        h4{
            width: 10%;
            display: inline-block;
            padding-left: 2%;
            color: #404040;
            font-weight: normal;
        }
        span{
            width: 14%;
            padding-left: 2%;
            color: #BEBEBE;
            font-size: 12px;
        }
        p{
            display: block;
            width: 100%;
            margin: 0;
            color: #BEBEBE;
            font-size: 12px;
            padding-left: 7%;
        }
    }
    /*我的学生样式*/
    .Live-con-con-Focus-con{
        position: relative;
        width: 100%;
        ul{
            display: flex;
            padding: 0;
            list-style: none;
            align-items: center;
        }
        li{
            height: 120px;
            border-radius:15px;
            width: 20%;
            margin-left: 2%;
            img{
                width: 50px;
                height: 50px;
                border-radius: 30px ;
            }
        }
    }
    .Live-con-con-Focus-con>ul>li{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        color: #383838;
        span{
            display: block;
            padding-left: 8px;

        }
    }
     .Live-con-con-Focus-con>ul>li>label>span:first-child{
        font-weight: bold;
        font-size: 16px;
    }
    .Live-con-con-Focus-con>ul>li>label>span:last-child{
        font-size: 12px;
        margin-top: 4px;
    }
    .Live-con-con-Focus-con>ul>li:first-child{
        margin: 0;
    }
    .Live-footer{
        margin-top:12px;
    }

    .Nodata{
        position: relative;
        width: 99%;
        height: 150px;
        margin: 0 auto;
        margin-top: 9px;
        border:2px solid rgba(71,206,207,1);
        border-radius:15px;
        display: flex;
        align-items: center;
        justify-self: center;
        flex-wrap: wrap;
    }
    .Nodata>div{
        position: relative;
        width: 100%;
        height: 60%;
    }
    .Nodata>div>label{
        width: 100%;
        display: flex;
        height: 40px;
        justify-content: center;
        align-items: center;
        img{
            width: 38px;
            height: 39px;
        }
    }
    .Nodata>div>label>span{
        color: #D8D8D8;
        font-size: 12px;
        font-weight: lighter;
        &:last-child{
            display: inline-block;
            width: 90px;
            height: 30px;
            line-height: 30px;
            border:1px solid rgba(216,216,216,1);
            border-radius:15px;
            text-align: center;
            cursor: pointer;
        }
    }
    .nochads{
        padding-top: 20px;
        padding-bottom: 70px;
    }
</style>